<template>
	<view class="my-concern-activities">
		<scroll-view class="activities-list" scroll-y="true">
			<!-- <view class="search-box">
				<image class="search-img" src="/static//searchPic.png"></image>
				<input class="search-input" placeholder="搜索活动名称" />
			</view> -->
			<view class="activity-box" v-for="activity of activities" @click="chooseActivity(activity)">
				<view class="img-box">
					<image class="activity-img" :src="activity.cover"></image>
				</view>
				<view class="content-box">
					<view class="activity-title">{{ activity.name }}</view>
					<view class="activity-labels">
						<view class="label-item" v-for="label of activity.labels.split(',')">{{ label }}</view>
					</view>
					<view class="price-box">
						<view class="price-text" v-if="activity.cost">¥{{ activity.cost }}<text class="price-unit">/人</text></view>
						<view class="free" v-if="!activity.cost">免费</view>
						<view class="user-box">
							<view class="activity-avatar-box" v-for="(user, index) of activity.activityUserList" v-if="index < 3" :style="{'left': `-${(index + 1) * 26}rpx`, 'z-index': 100 - index}">
								<image class="avatar-img" :src="user.avatar"></image>
							</view>
							<view class="user-num">{{ activity.activityUserList.length }}/{{ activity.maxPerson }}</view>
						</view>
					</view>
					<view class="status-box">
						<view class="concern-num">{{ activity.likeNum ? activity.likeNum : 0 }}人感兴趣</view>
						<view :class="activity.status === 1 ? 'openning' : 'close'">{{ activity.status === 1 ? '集合中' : (activity.status === 2 ? '集合结束' : '已取消') }}</view>
					</view>
				</view>
			</view>
			<view :style="{'height': safeBottom + 'px'}"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "myConcernActivities",
		data() {
			return {
				activities: [],
				pageNum: 1,
				safeBottom: 0
			};
		},
		mounted() {
			this.safeBottom = this.$safeBottom;
			this.getMyConcernActivities();
		},
		methods: {
			getMyConcernActivities() {
				const params = {
					pageSize: 50,
					pageNum: this.pageNum,
					orderByColumn: 'create_time',
					isAsc: 'desc',
					isJoin: 0
				}
				this.$apis.getMyConcernActivities(params).then(res => {
					if (res.code === 0) {
						this.activities = res.data.list;
					}
				});
			},
			chooseActivity(activity) {
				uni.navigateBack();
				uni.$emit('chooseActivity', activity);
			}
		}
	}
</script>

<style lang="scss">
	.my-concern-activities {
		width: 100%;
		height: 100%;

		.activities-list {
			width: 100%;
			height: 100%;

			.search-box {
				width: 686rpx;
				height: 80rpx;
				background: #F6F7F9;
				border-radius: 20rpx;
				margin-left: 32rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 40rpx;

				.search-img {
					width: 32rpx;
					height: 32rpx;
					margin: 0 22rpx 0 22rpx;
				}

				.search-input {
					width: 600rpx;
				}
			}
			
			.activity-box {
				width: 686rpx;
				margin-left: 32rpx;
				margin-top: 48rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.img-box {
					width: 280rpx;
					height: 220rpx;
					
					.activity-img {
						width: 280rpx;
						height: 220rpx;
						border-radius: 28rpx;
					}
				}
				
				.content-box {
					width: 374rpx;
					height: 220rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-between;
					
					.activity-title {
						width: 100%;
						font-size: 28rpx;
						font-weight: bold;
						color: #222222;
					}
					
					.activity-labels {
						width: 100%;
						
						.label-item {
							display: inline-block;
							padding: 2rpx 8rpx 2rpx 8rpx;
							margin-right: 8rpx;
							background: #F6F7F9;
							border-radius: 15rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: #666666;
						}
					}
					
					.price-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.price-text {
							font-size: 32rpx;
							font-weight: bold;
							color: #FF5E2E;
							
							.price-unit {
								font-size: 20rpx;
							}
						}
						
						.free {
							font-size: 32rpx;
							font-weight: bold;
							color: #31B57E;
						}
						
						.user-box {
							position: relative;
							
							.user-num {
								height: 32rpx;
								padding: 0 12rpx 0 12rpx;
								background: #F6F7F9;
								border-radius: 24px;
								border: 2rpx solid #FFFFFF;
								font-size: 20rpx;
								font-weight: bold;
								color: #999999;
								line-height: 32rpx;
								z-index: 999;
								position: sticky;
							}
							
							.activity-avatar-box {
								width: 28rpx;
								height: 28rpx;
								border-radius: 16rpx;
								border: 2rpx solid #FFFFFF;
								position: absolute;
								top: -8rpx;
								
								.avatar-img {
									width: 28rpx;
									height: 28rpx;
									border-radius: 16rpx;
								}
							}
						}
					}
					
					.status-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.concern-num {
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
						
						.openning {
							width: 96rpx;
							height: 32rpx;
							border-radius: 16px;
							border: 1px solid #31B57E;
							font-size: 20rpx;
							font-weight: 400;
							color: #31B57E;
							line-height: 32rpx;
							text-align: center;
						}
						
						.close {
							width: 96rpx;
							height: 32rpx;
							border-radius: 16px;
							border: 1px solid #999999;
							font-size: 20rpx;
							font-weight: 400;
							color: #999999;
							line-height: 32rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>
